<template>
	<view style="background: #f5f5f9;">
		<view class="active">
			<image :src="imgUrl + '/statics/js/modules/applet/img/active.jpg'" mode=""></image>
		</view>
		<image :src="imgUrl + '/statics/js/modules/applet/img/guize.png'" class="guize" @click="guize"></image>
		<view class="box" v-for="(item,index) in activityproduct" :key="index">
			<view class="left">
				<image class="img" :src="item.bannerImg"  mode="widthFix" />
			</view>
			<view class="right">
				<view  class="title">
					<view v-if="item.isNewProduct == 1" class="xin">新品</view>
					<view v-if="item.samplebookId != 0" class="yang">样册</view>
					{{item.tradeName}}
				</view>
				<view class="by">
					<image :src="imgUrl + '/statics/js/modules/applet/img/baoyou.png'" mode=""  class="baoyou"></image>
					<image :src="imgUrl + '/statics/js/modules/applet/img/zhpinbaozh.png'" mode="" class="zhengpin"></image>
				</view>
				<view class="price">
					<view class="fu">¥</view>
					<view class="money">
					{{item.originalPrice}}
					</view>
					<text class="grey">到手价</text>
				</view>
				<view class="shengyu">
					 <text class="qiang" @click="qiang(item)">抢</text>
					  <text class="jinshengxia">仅剩下{{item.remainNum}}件</text>
				<liu-progressbar :textInside="false" :progress="70" color="#F84A59" :height="'24rpx'" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import indexApi from '@/utils/request/index.js';
	import banner from '@/api/banner.js';
	import commonMethod from '@/utils/commonMethod.js';
	export default {
		data() {
			return {
				page:1,
				limit:10,
				activityproduct:[],
				productList: [],
				active:0,
				totalPages:0,
				currentPage : 1,
				index_share_title:'',
				index_share_desc:'',
				share_url:'',
				current:{},
				currentUser:{type: ''},
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
				menuList: [],
				box:false,
				tabNew:false,
				isPos:false,
				imgUrl: indexApi.baseUrl
			}
		}, 
		  mounted(){
			this.aa()
		},
		methods:{ 
			aa(){
				banner.activityproduct({page:this.page,limit:this.limit}).then(data =>{
					this.activityproduct = [...this.activityproduct,...data.data.page.list];
					this.totalPages = data.data.page.pages;
					this.currentPage = data.data.page.pageNum;
						if(this.currentPage == 1 && this.productList.length == 0){
							this.$refs.hint.setStatus('noData');
							 }
					this.activityproduct.forEach(item =>{
						if(item.banarImg){
							item.banarImg = item.banarImg.split(',')[0];
						}
						if(item.originalPrice== 0){
							item.originalPrice = '询价';
						}else{
							item.originalPrice = commonMethod.handlePrice(item.originalPrice);
						}
					});
					console.log(this.activityproduct,11111)
					console.log(data.data.page.list[1].bannerImg);
				});
			},
				 qiang(aaa){
					 // console.log(aaa.productId);
					 // const obj =JSON.stringify(aaa)
					 uni.navigateTo({
					   url: '../../../pages/product/active/activedetail?productId='+aaa.productId,
					 })
					 
				 },
				 guize(){
					 uni.navigateTo({
					   url: '../../../pages/product/active/guize',
					 })
				 },
				
				 // queryProductList(){
				 // 	banner.getProductList(this.productSearch).then(data => {
					// 	console.log(data);
				 // 		this.productList = [...this.productList,...data.data.page.list];
				 // 		this.totalPages = data.data.page.pages;
				 // 		this.currentPage = data.data.page.pageNum;
				 // 		if(this.currentPage == 1 && this.productList.length == 0){
				 // 			this.$refs.hint.setStatus('noData');
				 // 		}
				 // 		this.productList.forEach(item =>{
				 // 			if(item.banarImg){
				 // 				item.banarImg = item.banarImg.split(',')[0];
				 // 			}
				 // 			if(item.price == 0){
				 // 				item.price = '询价';
				 // 			}else{
				 // 				item.price = commonMethod.handlePrice(item.price);
				 // 			}
				 // 		});
				 // 	});
				 // },
				
				
		 }
	}
</script>

<style scoped lang="scss">
	.active image{
		width: 750rpx;
		height: 768rpx;
	    position: relative;
		background: linear-gradient(NaNdeg, #CACFE9 52%, #5683C3 100%), linear-gradient(NaNdeg, #EA3739 0%, #EA343B 100%);
		opacity: 1;
		z-index: 9;
	}
	.box{
		width: 708rpx;
		/* height: 298rpx; */
	    background: #FFFFFF;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		display: flex;
		justify-content: center;
		margin-left: 10px;
		margin-top: 10px;
	}
	.left{
		width: 255rpx;
		height: 294rpx;
		margin-left: 6px;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		background-image: url('https://img.nocexpo.com/t/20240219/c1411b442fe045e7ad60706ddf1c20fa.png') ;
		background-size: 100% 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	.left image{
		width: 220rpx;
		height:250rpx;
		position: relative;
		left:6px;
		top:20px;
	
	}
	.right{
		width: 450rpx;
		height:294rpx;
		margin-left: 10px;
		margin-top: 10px;
	}
	.xinpin{
		margin-top: 10px;
		margin-left: 5px;
		display: flex;
		justify-items: center;
	}
	.xinpin image{
		width: 56rpx;
		height:30rpx;
	}
	.xinpin text{
		font-size: 30rpx;
		font-family: SourceHanSansSC, SourceHanSansSC;
		font-weight: 600;
		color: #292929;
	}
	.baoyou{
		width: 56rpx;
		height:30rpx;
		margin: 10rpx 10rpx;
	}
	.zhengpin{
		width: 88rpx;
		height:30rpx;
		margin: 10rpx 10rpx;
	}
	.title{
		display: flex;
	}
	.price{
		display: flex;
		color: #ec2714;
		font-size: 45rpx;
		font-weight: 600;
		margin-left: 10rpx;
	}
	.fu {
		font-size: 35rpx;
		padding-top: 5px;
	}
	.money{
		padding-right: 13rpx;
		font-size: 42rpx;
		font-family: SourceHanSansSC, SourceHanSansSC;
		font-weight: 600;
		color: #EA333C;
	}
	.grey {
	    margin-top: 8px;
		font-weight: 600;
	    font-size: 18rpx;
        color: #767676;
	}
	.shengyu{
		width: 409rpx;
		height:68rpx;
		margin-top: 10px;
		background: url(https://img.nocexpo.com/t/20240220/3fb6281ca4de48418e83321cfb5bfa86.png);
		background-size: 100% 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	.title {
		padding: 0px 20rpx;
		margin-top: 10rpx;
		overflow: hidden;
		height: 70rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	
	.yang {
		display: inline;
		width: 52rpx;
		line-height: 28rpx;
		background: linear-gradient(90deg, #00aaa6 0%, #54d6d2 100%);
		border-radius: 4rpx;
		color: #fff;
		font-size: -2 + $font-size-min;
		text-align: center;
	    padding: 0 6rpx;
		}
	.xin {
		display: inline;
		width: 52rpx;
		height: 28rpx;
		background: linear-gradient(90deg, #f63737 0%, #ff7c45 100%);
		border-radius: 4rpx;
		color: #fff;
		font-size: -2 + $font-size-min;
		text-align: center;
	    padding: 0 6rpx;
		margin-right: 5px;
		}
	}
	.qiang{
		position: relative;
		left:80%;
		// top:-43%;
		font-size: 26px;
		font-weight: 600;
		color: white;
		font-family: SourceHanSansSC, SourceHanSansSC;
	}
	.jinshengxia{
		position: relative;
		left:27%;
		top:-5px;
		font-size: 26rpx;
		font-weight: 600;
		color:#EB4348;
		font-family: SourceHanSansSC, SourceHanSansSC;
		
	}
	.guize{
		width: 40rpx;
		height: 85rpx;
		position: absolute;
		z-index: 999;
		top:20%;
		right:0%;
	}
</style>